<template>
  <div>
    <el-card class="stats-card" style="height: 140px; margin-top: 20px;width: 1180px;margin-left: 20px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;"> <!-- 减小卡片的上下长度 -->
      <div class="stats-row">
        <div class="stats-item">
          <p class="stats-label">全部活动</p>
          <p class="stats-value">{{ totalActivities }}</p>
        </div>
        <div class="stats-dotted-line"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">待审核</p>
          <p class="stats-value">{{ unpublishedActivities }}</p>
        </div>
        <div class="stats-dotted-line2"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">审核通过</p>
          <p class="stats-value">{{ activitiesInSignupPeriod }}</p>
        </div>
        <div class="stats-dotted-line3"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">审核未通过</p>
          <p class="stats-value">{{ activitiesInProgress }}</p>
        </div>
      </div>
    </el-card>
    <el-select v-model="selectedStatus" placeholder="选择活动状态" style="margin-top: 20px; margin-left: 20px; width: 200px; background-color: #f5f7fa;" @change="filterActivities">
      <el-option
          v-for="activityStatus in activityStatusOptions"
          :key="activityStatus.value"
          :label="activityStatus.label"
          :value="activityStatus.value"
      >
      </el-option>
    </el-select>

    <div class="activity_table" style="margin-top:-10px;margin-left: 20px">
    <el-table :data="activities" style="width: 100%">
      <el-table-column prop="name" label="活动名称"></el-table-column>
      <el-table-column label="活动描述">
        <template slot-scope="scope">
          <div v-html="scope.row.activityDescription"></div>
        </template>
      </el-table-column>
      <el-table-column label="是否通过">
        <template slot-scope="scope">
          <span v-if="scope.row.status===3">通过</span>
          <span v-else-if="scope.row.status===1">未审核</span>
          <span v-else-if="scope.row.status===2">未审核</span>
          <span v-else-if="scope.row.status===4">审核未通过</span>
          <span v-else>活动已发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="{ row }">
        <template>
          <el-button type="text" @click="showDetail(row)">查看详情</el-button>
          <!-- 可以添加其他操作按钮，比如报名 -->
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="approveActivity(scope.row.id)" v-if="!scope.row.passed">通过</el-button>
          <el-button type="danger" @click="rejectActivity(scope.row.id)" v-if="!scope.row.passed">不通过</el-button>
          <span v-else>已审核</span>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-dialog
        :visible.sync="dialogVisible"
        title="活动详情"
        :show-close="false"
    >
      <span>活动详情：</span>
      <p v-html="detail"></p>
      <img v-if="imageUrl" :src="imageUrl" alt="活动图片" style="max-width: 100%; height: auto;" />
      <el-button @click="downloadFile" v-if="imageUrl">下载图片</el-button>
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {getCheckActivity, checkPass, checkNotPass} from '../../../../api/check'
import {mapGetters} from 'vuex'
import {getActivityUrl} from '../../../../api/activityUrl'
import {downloadFile} from '../../../../api/api'
import {getDetail} from '../../../../api/activity'
export default {
  inject: ['reload'],
  computed: {
    totalActivities () {
      return this.activities.length
    },
    unpublishedActivities () {
      return this.activities.filter(activity => activity.status === 1 || activity.status === 2).length
    },
    activitiesInSignupPeriod () {
      return this.activities.filter(activity => activity.status === 3).length
    },
    activitiesInProgress () {
      return this.activities.filter(activity => activity.status === 4).length
    },
    activityStatusOptions () {
      return [
        { value: '', label: '活动状态' }, // 全部选项
        { value: 2, label: '未审核' },
        { value: 3, label: '审核通过' },
        { value: 4, label: '审核未通过' },
        { value: 5, label: '发布成功' }
      ]
    },

    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  data () {
    return {
      detail: '',
      imageUrl: '',
      dialogVisible: false,
      activities: [
      ], // 存储从后端获取的活动列表
      selectedStatus: '', // 存储选中的活动状态
      originalActivities: [] // 保存原始活动数据
    }
  },
  created () {
    this.fetchActivities()
  },
  methods: {
    downloadFile () {
      getActivityUrl(this.activityId).then(urlResult => {
        console.log(urlResult)
        let obj = {
          path: urlResult[0].url
        }
        downloadFile(obj)
          .then(response => {
            // 通过创建 Blob 对象来处理下载的文件
            const blob = new Blob([response], { type: 'image/jpeg' })

            // 创建一个 URL，用于文件下载
            const downloadUrl = window.URL.createObjectURL(blob)

            // 创建一个 <a> 标签来触发下载
            const link = document.createElement('a')
            link.href = downloadUrl
            link.download = decodeURIComponent(urlResult[0].fileName)
            link.style.display = 'none'

            document.body.appendChild(link)
            link.click()

            // 清理资源
            window.URL.revokeObjectURL(downloadUrl)
            document.body.removeChild(link)
          })
          .catch(error => {
            console.error(error)
            // 处理错误
          })
      })
    },
    showDetail (activity) {
      Promise.all([getDetail(activity.id), getActivityUrl(activity.id)])
        .then(([detailResult, urlResult]) => {
          this.activityId = activity.id
          this.detail = detailResult.activityDescription
          this.imageUrl = urlResult[0].url // 获取第一个对象的 URL 属性
          this.dialogVisible = true
        })
        .catch(error => {
          // 处理错误
          console.error(error)
          this.$message.error('获取活动详情或链接时出错')
        })
    },
    closeDialog () {
      this.dialogVisible = false
    },
    filterActivities () {
      let filteredActivities = this.originalActivities
      if (this.selectedStatus) {
        filteredActivities = filteredActivities.filter(activity => activity.status === this.selectedStatus)
      }
      // 根据选中的状态值过滤活动列表
      this.activities = filteredActivities
    },

    fetchActivities () {
      const uid = this.userId
      getCheckActivity(uid)
        .then(response => {
          this.originalActivities = response
          this.activities = response // 假设返回的数据为活动列表
        })
        .catch(error => {
          console.error('Error fetching activities:', error)
        })
    },
    approveActivity (aid) {
      // 调用审核通过的后端接口方法
      checkPass(aid)
        .then(response => {
          this.fetchActivities() // 重新加载活动列表
          this.$notify({
            message: '审核通过',
            type: 'success'
          })
        })
        .catch(error => {
          console.error('Error approving activity:', error)
        })
    },
    rejectActivity (aid) {
      // 调用审核不通过的后端接口方法
      checkNotPass(aid)
        .then(response => {
          this.fetchActivities() // 重新加载活动列表
          this.$notify({
            message: '审核不通过',
            type: 'error'
          })
        })
        .catch(error => {
          console.error('Error rejecting activity:', error)
        })
    }
  }
}
</script>

<style scoped>
.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px; /* 减小卡片的上下长度 */
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 200px; /* 调整字段之间的间距 */
  position: relative;
}

.stats-item {
  text-align: center;
}

/* 新增样式用于虚线 */
.stats-dotted-line {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(20% - 1px); /* 将虚线置于两字段之间的中间位置 */
}

.stats-dotted-line2 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-dotted-line3 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(80% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px; /* 调整字段与数字之间的间距 */
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
.activity-list {
  padding: 20px;
}
</style>
